<script lang="ts" setup>
import {ElMessage} from 'element-plus';
import {jStorage} from 'jzutil';
import {defineProps, ref, computed, toRefs} from 'vue';

const props = defineProps({
    type: String
});
const {type = ''} = toRefs(props);
const addStart = ref(false);
const columns = ref([
    {
        label: '名称',
        key: 'name'
    },
    {
        label: '创建时间',
        key: 'name'
    },
    {
        label: '状态',
        key: 'status'
    }
]);
const tableData = ref<any[]>([]);
const infoMap = ref<any>({
    home: {
        title: '首页'
    },
    work: {
        title: '作品展示'
    },
    detail: {
        title: '作品详情'
    },
    callus: {
        title: '联系我们'
    }
});
const crtAddType = ref('');
const types = ref([
    {
        label: '轮播图',
        value: 'swiper'
    },
    {
        label: '卡片',
        value: 'card'
    },
    {
        label: '九宫格',
        value: 'nine'
    }
]);
const crtCardType = ref('');
const cascaderProps = ref({
    lazy: true,
    lazyLoad(node: any, resolve: any) {
        if (node.value === 'swiper') {
            const tempArr = jStorage.getLocal('swiper') || [];
            const result = tempArr.map((item: any) => {
                return {
                    label: item.name,
                    value: item.name,
                    leaf: true
                };
            });
            resolve(result);
        } else if (node.value === 'card') {
            const tempArr = jStorage.getLocal('card') || [];
            const result = tempArr.map((item: any) => {
                return {
                    label: item.name,
                    value: item.name,
                    leaf: true
                };
            });
            resolve(result);
        } else if (node.value === 'nine') {
            const tempArr = jStorage.getLocal('nine') || [];
            const result = tempArr.map((item: any) => {
                return {
                    label: item.name,
                    value: item.name,
                    leaf: true
                };
            });
            resolve(result);
        } else {
            resolve(types.value);
        }
    }
});
const tempValue = ref<any[]>([]);
const showAddModule = ref(false);
const handleEdit = (row: any) => {};
const handleUse = (row: any) => {};
const selectChange = (item: any) => {
    console.log(item);
};
const addModuletoTemp = () => {
    if (crtCardType.value[0] === 'swiper') {
        const swipers = jStorage.getLocal('swiper') || [];
        const swiper = swipers.finds('name', crtCardType.value[1]).result;

        const {source = []} = swiper;
        swiper.source = source.map((item: any) => {
            return JSON.parse(item);
        });

        tempValue.value.push([...crtCardType.value, swiper]);
    }
    if (crtCardType.value[0] === 'card') {
        const cards = jStorage.getLocal('card') || [];
        const card = cards.finds('name', crtCardType.value[1]).result;
        tempValue.value.push([...crtCardType.value, card]);
        //
    }
    showAddModule.value = false;
};
const addItem = () => {};
const submitTemp = () => {
    tableData.value.push(tempValue.value);
    ElMessage({
        type: 'success',
        message: '保存成功'
    });
    jStorage.setLocal('temp', tableData.value);
    addStart.value = false;
    setTimeout(() => {
        tempValue.value = [];
    }, 200);
};
const handlePreview = (item: any) => {
    tempValue.value = item;
};
(() => {
    tableData.value = jStorage.getLocal('temp') || [];
})();
</script>
<template>
    <el-container>
        <el-aside width="800px">
            <div class="header">
                <el-button @click="addStart = true">新增模板</el-button>
            </div>
            <div class="table">
                <el-table stripe border :data="tableData">
                    <el-table-column
                        :prop="item.key"
                        :label="item.label"
                        v-for="(item, index) in columns"
                        :key="index.toString()"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="text" @click="handlePreview(scope.row)">预览</el-button>
                            <el-button size="mini" type="text" @click="handleUse(scope.row)">使用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="footer">
                    <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
                </div>
            </div>
        </el-aside>
        <el-main>
            <div class="phone-view">
                <div class="phone-view-body-inner">
                    <div class="phone-header">{{ infoMap[type].title }}</div>
                    <div class="phone-view-body-inner-copy">
                        <div class="item-temp" v-for="(item, index) in tempValue" :key="index.toString()">
                            <el-carousel height="150px" indicator-position="none" v-if="item[0] === 'swiper'">
                                <el-carousel-item v-for="it in item[2].source" :key="it">
                                    <el-image
                                        style="width: 100%; height: 100%"
                                        :src="it.coverImage"
                                        fit="cover"
                                    ></el-image>
                                </el-carousel-item>
                            </el-carousel>
                            <div v-if="item[0] === 'card'">
                                <div :innerHTML="item[2].content"></div>
                            </div>
                        </div>
                        <div class="add-body" v-if="addStart">
                            <el-button size="mini" @click="showAddModule = true">添加</el-button>
                            <div>
                                <el-button size="mini" @click="addStart = false">取消</el-button>
                                <el-button size="mini" @click="submitTemp">保存</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        <el-dialog
            title="添加模块"
            v-model="showAddModule"
            width="40%"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
        >
            <el-cascader :props="cascaderProps" v-model="crtCardType"></el-cascader>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showAddModule = false">取 消</el-button>
                    <el-button type="primary" @click="addModuletoTemp">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </el-container>
</template>
<style scoped lang="less">
.el-container {
    width: 100%;
    height: 100%;
}
.el-main {
    width: calc(100% - 800px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.phone-view-body-inner {
    height: 100%;
    width: 100%;
}
.phone-view {
    height: 550px;
    width: 275px;
    background-image: url('../../static/images/phone.png');
    background-size: 275px 550px;
    position: relative;
    padding: 32px 15px 20px 18px;
    overflow: hidden;
}
.phone-view-body-inner-copy {
    width: 100%;
    height: calc(100% - 32px);
    overflow-x: hidden;
    overflow-y: auto;
}

.phone-header {
    width: 100%;
    height: 32px;
    text-align: center;
    line-height: 32px;
}
.el-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.header {
    width: 100%;
    height: 40px;
}
.table {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // align-items: flex-end;
}
.footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.add-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item-temp {
    width: 100%;
}
</style>
